<template>
  <view>
    <c-header></c-header>
    <swiper-taro :classA="classA"></swiper-taro>
    <view class="urban-area">
      <view class="urban-content">
        <view class="urban-content-block">常州</view>
        <view class="urban-content-block">常州</view>
        <view class="urban-content-block">常州</view>
        <view class="urban-content-block">常州</view>
        <view class="urban-content-block">常州</view>
      </view>
    </view>
    <view class="popular-schools">
      <view class="popular-content">
        <view class="popular-content-title">
          <view class="popular-content-t1">热门学校</view>
          <view class="popular-content-t2"
            >更多
            <image class="admissions-image" src="../../icon/右箭头.png"></image>
          </view>
        </view>
        <view class="popular-content-box">
          <view class="popular-content-block">
            <image
              src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
            ></image>
            <text>艾迪学校</text>
          </view>
          <view class="popular-content-block">
            <image
              src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
            ></image>
            <text>艾迪学校</text>
          </view>
          <view class="popular-content-block">
            <image
              src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
            ></image>
            <text>艾迪学校</text>
          </view>
          <view class="popular-content-block">
            <image
              src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
            ></image>
            <text>艾迪学校</text>
          </view>
        </view>

        <view class="popular-content-more">更多学校</view>
      </view>
    </view>
    <view class="popular-brochures">
      <view class="popular-content">
        <view class="popular-content-title">
          <view class="popular-content-t1">热门简章</view>
          <view class="popular-content-t2"
            >更多
            <image class="admissions-image" src="../../icon/右箭头.png"></image>
          </view>
        </view>
        <view class="popular-brochures-content">
          <view class="popular-brochures-block">
            <view class="brochures-t1">
              <image
                src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
              ></image>
            </view>
            <view class="brochures-t2">
              <view class="brochures-block-title"
                >测试文字测试文字测试文字测试文字测试文字</view
              >
              <view class="brochures-content-text-c">
                <view class="brochures-content-title">留学方向：</view>
                <view class="brochures-content-title-c"
                  >美国 英国 澳大利亚</view
                >
              </view>
              <view class="brochures-content-text-c">
                <view class="brochures-content-title">学习阶段：</view>
                <view class="brochures-content-title-s">高中</view>
              </view>
            </view>
          </view>
        </view>
        <view class="popular-brochures-content">
          <view class="popular-brochures-block">
            <view class="brochures-t1">
              <image
                src="https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png"
              ></image>
            </view>
            <view class="brochures-t2">
              <view class="brochures-block-title"
                >测试文字测试文字测试文字测试文字测试文字</view
              >
              <view class="brochures-content-text-c">
                <view class="brochures-content-title">留学方向：</view>
                <view class="brochures-content-title-c"
                  >美国 英国 澳大利亚</view
                >
              </view>
              <view class="brochures-content-text-c">
                <view class="brochures-content-title">学习阶段：</view>
                <view class="brochures-content-title-s">高中</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
     <view class="focus">
    <view class="issue-box">
      <view class="popular-content-title">
          <view class="popular-content-t1">今日聚焦</view>
          <view class="popular-content-t2"
            >更多
            <image class="admissions-image" src="../../icon/右箭头.png"></image>
          </view>
        </view>
    </view>
    <view class="f-content">
      <view class="g">
        <view class="r-p"
          >测试文字用于展示和点击测试文字用于展示和点击测试文字用于展示和点击
          <view class="r-inside"
            >测试文字用于展示和点击测试文字用于展示和点击测试文字用于展示和点击</view
          >
        </view>
      </view>
      <view
       
        class="content"
        v-for="item in content"
        :key="item.id"
        >{{ item.title }}</view
      >
    </view>
    <view class="f-more"> 更多资讯 </view>
  </view>
    <view class="issue">
      <view class="issue-box">
        <view class="popular-content-title">
          <view class="popular-content-t1">有问必答</view>
          <view class="popular-content-t2"
            >更多
            <image class="admissions-image" src="../../icon/右箭头.png"></image>
          </view>
        </view>
      </view>
      <view class="issue-c">
        <view class="i-content">
          <view class="C1">
            <image src="../../icon/问题-互动.png"></image>
            <view style="padding-left: 8px; line-height: 25px; overflow: hidden"
              >这是测试文字这是测试文字这是测试文字这的防守对方的身份</view
            >
          </view>
          <view class="C2">
            这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字overflow:
            hidden;overflow: hidden;overflow: hidden;
          </view>
        </view>
      </view>
      <view class="issue-more">更多问答</view>
    </view>
    <c-footer></c-footer>
  </view>
</template>

<script>
import "./index.css";
import headers from "../../components/header/headers.vue";
import swiper from "../../components/swiper/swiper.vue";
import footers from "../../components/footer/footers.vue";
export default {
  components: {
    footers,
    headers,
    swiper,
  },
  data() {
    return {
      classA: "class-b",
      content: [
        {
          id: 1,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 2,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 3,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 4,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 5,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
      ],
    };
  },
  methods: {
   
  },
};
</script>

<style>
.urban-area {
  margin-top: 20px;
  width: 100%;
  background-color: white;
  padding-bottom: 20px;
}
.urban-content {
  display: flex;
  flex-wrap: wrap;
  width: 92%;
  margin: auto;
}
.urban-content-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 25px;
  margin-top: 20px;
  margin-right: 22px;
  width: 150px;
  height: 50px;
  background-color: #f5f5f5;
}
.popular-schools {
  margin-top: 20px;
  width: 100%;
  background-color: white;
}
.popular-content {
  width: 92%;
  margin: 0 auto;
  overflow: hidden;
}
.popular-content-title {
  margin-top: 20px;
  height: 40px;
  width: 100%;
  display: flex;
  border-left: 5px solid #0b6db6;
}
.popular-content-t1 {
  margin-left: 10px;
}
.popular-content-t2 {
  margin-left: auto;
  font-size: 25px;
  padding-right: 10px;
}
.popular-content-box {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.popular-content-block {
  margin-top: 20px;
  border: 1px solid #ccc;
  text-align: center;
  width: 27.3%;
  padding: 2%;
}
.popular-content-block image {
  width: 100%;
  height: 200px;
}
.popular-content-more {
  margin-top: 20px;
  height: 70px;
  background-color: #0b6db6;

  color: white;
  line-height: 70px;
  text-align: center;
}
.popular-brochures {
  margin-top: 20px;
  width: 100%;
  background-color: white;
}
.popular-brochures-content {
  margin-top: 20px;
  width: 100%;
}
.popular-brochures-block {
  display: flex;
  width: 100%;
  height: 180px;
  padding: 5px 0px;
  border-bottom: 1px dotted #ccc;
}
.brochures-t1 {
  width: 25%;
  height: 80%;
}
.brochures-t2 {
  padding: 10px 0px;
  margin-left: 2%;
  width: 73%;
}
.admissions-image {
  width: 30px;
  height: 30px;
  margin-left: auto;
}
.popular-brochures-block image {
  width: 100%;
  height: 100%;
}
.brochures-block-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brochures-content-text-c {
  margin-top: 15px;
  display: flex;
  font-size: 30px;
}
.brochures-content-title {
  font-weight: bold;
}
.brochures-content-title-s {
  color: #0b6db6;
  border: 1px solid #0b6db6;
  border-radius: 10px;
  padding: 0px 5px;
}
</style>
